<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>登录</title>
    <meta charset="utf-8"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut  icon"   media="screen"/>
    <link rel="stylesheet" href="/css/layui.css" media="all">
    <style type="text/css">
        body, html {
            height: 100%;
            min-width: 1000px;
            color: #fffff;
        }

        body {
            background-image: url("images/img-bg.png");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 100%;
        }

        .logo {

            height: 70px;
            width: 100%;
            background-color: #fff;
        }

        .logo span {
            left: 30px;
            position: absolute;
            height: 60px;
            width: 60px;
            top: 8px;
        }

        .logo img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }

        .logo .logo_txt {
            position: absolute;
            left: 110px;
            top: 18px;
            font-size: 26px;
            width: 185px;
        }

        .write {
            color: #FFFFFF;
        }

        .layui-form-item {
            margin-bottom: 30px;
        }

        /*验证码*/
        #vCode {
            display: inline-block;
            width: 100px;
            height: 48px;
            position: absolute;
            top: 1px;
            right: 72px;
        }

        #vCode img {
            display: inline-block;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .layui-form-item {
            padding: 0 70px 0 40px;
            margin-left: -85px;
        }

        #layui-form {
            /* box-shadow: 6px 6px 15px #666;*/
            height: 470px;
            width: 580px;
           /* background-color:rgba(255,255,255,0.4);*/
            background-color: #FFFFFF;
            border-radius: 50px;
            padding: 10px;
            position: absolute;
            right: 10%;
            top: 50%;
            transform: translateY(-50%);
            color: #FFFFFF;
        }

        .layui-input {
            height: 50px;
            border: none;
            background-color: #f2f2f2;
            font-size: 18px;
            padding-left: 95px;
            letter-spacing: 1px;
        }

        .imgs {
            position: absolute;
            left: 30px;
            top: 50%;
            height: 35px;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
<div>
    <form class="layui-form" method="post" lay-filter="example" id="layui-form">

        <h3 style="color: #052696;font-size: 40px;letter-spacing: 5px;text-align: center;margin-top: 20px;">
            平台</h3>


        <div class="layui-form-item" style="margin-top:50px ;">
            <div class="layui-input-block">
                <img class="imgs" src="/images/logo/headerLogo.png">
                <input type="text" name="username" id="username" lay-verify="required|username" value="111" autocomplete="off"
                       placeholder="请输入您的学工号" maxlength="16" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <img class="imgs" src="/images/logo/headerLogo.png">
                <input type="password" name="password" lay-verify="required|password" value="111111"  placeholder="请输入您的密码"
                       autocomplete="off" class="layui-input"    maxlength="6">
            </div>
        </div>
        <div class="layui-form-item" style="position: relative;">
            <div class="layui-input-block">
                <img class="imgs" src="/images/logo/headerLogo.png">
                <input type="text" name="vCode" lay-verify="required" autocomplete="off" placeholder="请输入您的验证码"
                       maxlength="4"  value="1234" class="layui-input">
            </div>
            <a href="javascript:void(0);" class="" id="vCode" style=""><img src="/images/logo/validateCode.png"/></a>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="loginBtn"
                        style="width:445px; background-color: #42b3ff;height: 50px;font-size: 20px;letter-spacing: 5px;border-radius: 10px;"
                        id="loginBtn">登录
                </button>
            </div>
        </div>

    </form>

</div>
<div class="bottom" style="position: fixed;bottom:10px;left: 0;width: 100%;text-align: center;">
    <span style="color: #FFFFFF;font-size: 14px;">技术支持：<a href="http://www.baidu.cn/" target="_blank"
                                                          style="color: #FFFFFF;font-size: 14px;"></a></span>
</div>
<script src="/layui.all.js" charset="utf-8"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript">



    //主动加载jquery模块
    layui.use(['jquery', 'layer'], function () {
        var $ = layui.jquery //重点处
            , layer = layui.layer,
            form = layui.form ;

        //自定义验证规则
        form.verify({
            username: function (value) {
                value = value.trim();
                if(value.length>64){
                    return '长度超出限制：长度不能超过64位';
                }
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '请输入正确学工号';
                }
            },
            password: function (value) {
                var regx = /^[a-zA-Z0-9]{4,12}$/;
                if (!regx.test(value)) {
                    return '请输入正确密码！';
                }
            }
        });

        //初始化验证码
        $(function () {

            //session失效跳出
            if (window != top) top.location.href = location.href;
            //刷新验证码
            $('#vCode').children('img').attr('src', 'kaptcha?' + Math.floor(Math.random() * 100));

        });

        //刷新验证码
        $('#vCode').click(function () {
            $(this).children('img').hide().attr('src', 'kaptcha?' + Math.floor(Math.random() * 100)).fadeIn();
        });
        //Enter键登录
        $(document).on('keydown', function (e) {  //document为当前元素，限制范围，如果不限制的话会一直有事件
            if (e.keyCode == 13) {
                $("#loginBtn").trigger("click");
            }
        });

        //去除空格
        $("input").change(function(){
            $(this).val($(this).val().trim());
        });

        layui.use(['form', 'layedit', 'laydate'], function () {
            var form = layui.form
                , layer = layui.layer;

            //监听提交
            form.on('submit(loginBtn)', function (data) {
                data.username=$("#username").val();
                data.password=$("#password").val();
                data.schoolNo=$("#schoolNo").val();

                $('#loginBtn').attr("disabled", true);
                $.ajax({
                    type: 'get',
                    data: data.field,//登录入参
                    url: "/doLogin",//登录接口
                    async: false,
                    dataType: "JSON",
                    success: function (result) {
                        if (result.code == 0) {
                            layer.msg(result.data, {icon: 6, time: 2000}, function () {//登录成功跳转到主页
                                window.location.href = '/index';
                            });
                        } else {
                            layer.msg(result.msg, {icon: 5, time: 2000}, function () {
                                //局部刷新
                                $("#vCode").children('img').hide().attr('src', 'kaptcha?' + Math.floor(Math.random() * 100)).fadeIn();
                                $('#loginBtn').attr("disabled", false);
                            });
                        }
                    },
                    error: function (e) {
                        layer.msg('系统异常，请稍后重试！', {icon: 5, anim: 6, time: 1500}, function () {//登录成功跳转到主页
                            //局部刷新
                            $("#vCode").children('img').hide().attr('src', 'kaptcha?' + Math.floor(Math.random() * 100)).fadeIn();
                            $('#loginBtn').attr("disabled", false);
                        });
                    }
                });
            });


        });

    });
</script>
</body>
</html>